﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="build.aspx.cs" Inherits="Template.Web.Admin.build" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="Mosaddek">
    <meta name="keyword" content="FlatLab, Dashboard, Bootstrap, Admin, Template, Theme, Responsive, Fluid, Retina">
    <link rel="shortcut icon" href="img/favicon.png">

    <title>生成</title>

    <!-- Bootstrap core CSS -->
    <link href="../css/bootstrap.min.css" rel="stylesheet">
    <link href="../css/bootstrap-reset.css" rel="stylesheet">
    <!--external css-->
    <link href="../assets/font-awesome/css/font-awesome.css" rel="stylesheet" />

    <!--right slidebar-->
    <link href="../css/slidebars.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="../css/style.css" rel="stylesheet">
    <link href="../css/style-responsive.css" rel="stylesheet" />

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 tooltipss and media queries -->
    <!--[if lt IE 9]>
    <script src="js/html5shiv.js"></script>
    <script src="js/respond.min.js"></script>
    <![endif]-->

</head>

<body>
    <section class="wrapper site-min-height">
        <!-- page start-->
        <div class="col-lg-12">
            <section class="panel panel-primary">
                <header class="panel-heading">
                    <i class="fa fa-cogs"></i>
                    数据列表
             <span class="tools pull-right">
                 <button id="btnBuild" class="btn btn-success btn-sm"><i class="fa fa-file-text-o"></i>一键生成</button>
                 <button id="btnAddRow" class="btn btn-info btn-sm"><i class="fa fa-plus"></i>添加一行</button>
                 <button id="btnReset" class="btn btn-default btn-sm"><i class="fa fa-undo"></i>重置</button>
                 <button id="btnImport" class="btn btn-info btn-sm"><i class="fa fa-file-text-o"></i>导入</button>
             </span>
                </header>
                <div class="panel-body">
                    <form class="form-horizontal" role="form">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label col-md-3">模块名称</label>

                                    <div class="col-md-9">
                                        <input type="text" class="form-control" placeholder="例：用户信息"
                                            id="moduleName">
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label col-md-3">模块id</label>

                                    <div class="col-md-9">
                                        <input type="text" class="form-control" placeholder="例：UserInfo"
                                            id="moduleID">
                                        <span class="help-block">与Ending后台xxxx.ashx一致</span>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label class="control-label col-md-3">表名</label>

                                    <div class="col-md-9">
                                        <input type="text" class="form-control" placeholder="例：template_users"
                                            id="className">
                                        <span class="help-block">model,bll,dal 名称</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                    <section>
                        <table class="table table-striped table-hover table-bordered"
                            id="myTable">
                            <thead>
                                <tr>
                                    <th>字段名称</th>
                                    <th>id</th>
                                    <th>类型</th>
                                    <th>maxlength</th>
                                    <th>placeholder</th>
                                    <th>必填错误提示</th>
                                    <th>下方文字说明</th>
                                    <th>列表显示列</th>
                                    <th>搜索字段</th>
                                </tr>
                            </thead>
                            <tbody id="mytbody">
                            </tbody>
                        </table>
                    </section>
                </div>
            </section>
        </div>
        <!-- page end-->

        <!--详情页面展示-->
        <div class="col-lg-12">
            <section class="panel panel-primary">
                <header class="panel-heading">
                    <i class="fa fa-cogs"></i>
                    详情页面
             <span class="tools pull-right">
                 <button id="btnCopyView" class="btn btn-success btn-sm btnHtmlCopy">
                     <i class="fa fa-file"></i>复制代码
                 </button>

             </span>
                </header>
                <div class="panel-body" id="divView">
                </div>
            </section>
        </div>

        <!--编辑页面展示-->
        <div class="col-lg-12">
            <section class="panel panel-primary">
                <header class="panel-heading">
                    <i class="fa fa-cogs"></i>
                    编辑页面
             <span class="tools pull-right">
                 <button id="btnCopyModify" class="btn btn-success btn-sm btnHtmlCopy">
                     <i class="fa fa-file"></i>复制代码
                 </button>

             </span>
                </header>
                <div class="panel-body" id="divModify">
                </div>
            </section>
        </div>

        <!--列表页面展示-->
        <div class="col-lg-12">
            <section class="panel panel-primary">
                <header class="panel-heading">
                    <i class="fa fa-cogs"></i>
                    列表页面
                <span class="tools pull-right">
                    <button id="btnCopyList" class="btn btn-success btn-sm btnHtmlCopy">
                        <i class="fa fa-file"></i>复制代码
                    </button>

                </span>
                </header>
                <div class="panel-body" id="divList">
                </div>
            </section>
        </div>

        <!--后台代码展示-->
        <div class="col-lg-12">
            <section class="panel panel-primary">
                <header class="panel-heading">
                    <i class="fa fa-cogs"></i>
                    后台代码
                <span class="tools pull-right">
                    <button id="btnCopyEnding" class="btn btn-success btn-sm btnHtmlCopy">
                        <i class="fa fa-file"></i>复制代码
                    </button>

                </span>
                </header>
                <div class="panel-body" id="divEnding">
                </div>
            </section>
        </div>

        <!--导入数据源modal-->
        <div class="col-lg-12">
            <div class="modal fade modal-dialog-center" id="myModalImport" tabindex="-1" role="dialog"
                aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;">
                <div class="modal-dialog ">
                    <div class="modal-content-wrap">
                        <div class="modal-content">
                            <div class="modal-header">
                                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                    ×
                                </button>
                                <h4 class="modal-title">Modal Tittle</h4>
                            </div>
                            <div class="modal-body">
                                <form class="form-horizontal" role="form">
                                    <div class="form-body">
                                        <div class="form-group">
                                            <textarea id="importDataSource" class="form-control" rows="17"
                                                placeholder="">{
moduleName: '用户信息',
moduleID: 'UserInfo',
className: 't_user',
fieldList: [
    {
        name:'用户姓名',
        id:'userName',
        type:'input',
        maxlength:'20',
        placeholder:'请输入用户姓名！',
        requiredMsg:'用户姓名不能为空！',
        direcation:'最多输入20个字符！',
        isShowColumn:'Y',
        isSearch:'Y'
    },
],
}
                                                </textarea>
                                            <span class="help-block">请保证数据格式正确</span>
                                        </div>
                                    </div>
                                </form>
                            </div>
                            <div class="modal-footer">
                                <button data-dismiss="modal" class="btn btn-default" type="button">Close</button>
                                <button id="btnConfirmImport" class="btn btn-warning" type="button">确认</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </section>

    <!-- js placed at the end of the document so the pages load faster -->
    <script src="../js/jquery.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <script class="include" type="text/javascript" src="../js/jquery.dcjqaccordion.2.7.js"></script>
    <script src="../js/jquery.scrollTo.min.js"></script>
    <script src="../js/slidebars.min.js"></script>
    <script src="../js/jquery.nicescroll.js" type="text/javascript"></script>
    <script src="../js/respond.min.js"></script>

    <!--common script for all pages-->
    <script src="../js/common-scripts.js"></script>

    <script src="/scripts/template/template.js" type="text/javascript"></script>
    <script src="/scripts/template/pageTemplate.js" type="text/javascript"></script>
    <script src="/scripts/zeroclipboard/scripts/jquery.zeroclipboard.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="/scripts/syntaxhighlighter/scripts/shCore.js"></script>
    <script type="text/javascript" src="/scripts/syntaxhighlighter/scripts/shAutoloader.js"></script>

    <!-- table行模板 -->
    <script id="templatetr" type="text/html">
        <tr>
            <td width="10%">
                <input type="text" class="form-control" placeholder="字段名称" /></td>
            <td width="10%">
                <input type="text" class="form-control" placeholder="字段ID" /></td>
            <td width="10%">
                <select class="form-control">
                    <option class="form-control" value="input">input</option>
                    <option class="form-control" value="select">select</option>
                    <option class="form-control" value="time">time</option>
                    <option class="form-control" value="textarea">textarea</option>
                    <option class="form-control" value="fileinput">fileinput</option>
                </select></td>
            <td width="10%">
                <input type="text" class="form-control" placeholder="maxlength" maxlength="4"
                    style="ime-mode: disabled" /></td>
            <td width="10%">
                <input type="text" class="form-control" placeholder="placeholder" /></td>
            <td width="10%">
                <input type="text" class="form-control" placeholder="必填错误提示" /></td>
            <td width="20%">
                <input type="text" class="form-control" placeholder="下方文字说明" /></td>
            <td width="10%">
                <select class="form-control">
                    <option class="form-control" value="N">否</option>
                    <option class="form-control" value="Y">是</option>
                </select></td>
            <td width="10%">
                <select class="form-control">
                    <option class="form-control" value="N">否</option>
                    <option class="form-control" value="Y">是</option>
                </select></td>
        </tr>
    </script>

    <script>
        $(document).ready(function () {

            // ===================
            // 数据源
            // ===================
            var myObj = {
                defaultTableHtml: null,
                getDataFromTable: null,
                buildHtml: null,
            };
            var data = {};

            // ===================
            // 生成默认表格
            // ===================
            (function () {
                myObj.defaultTableHtml = template('templatetr');

                // 默认给5行
                for (var i = 0; i < 5; i++) {
                    $('#mytbody').append(myObj.defaultTableHtml);
                }
            })();


            // ===================
            // 数据源的操作
            // ===================
            (function () {
                // 从表格中获取数据源
                myObj.getDataFromTable = function () {
                    data.moduleName = $('#moduleName').val();
                    data.moduleID = $('#moduleID').val();
                    data.className = $('#className').val();
                    data.fieldList = [];

                    $('#mytbody').find('tr').each(function () {
                        var arrtd = $(this).children();
                        var field = {};

                        if (arrtd.eq(0).find('input').val()) {
                            field.name = $.trim(arrtd.eq(0).find('input').val());
                            field.id = $.trim(arrtd.eq(1).find('input').val());
                            field.type = $.trim(arrtd.eq(2).find('select').val());
                            field.maxlength = $.trim(arrtd.eq(3).find('input').val());
                            field.placeholder = $.trim(arrtd.eq(4).find('input').val());
                            field.requiredMsg = $.trim(arrtd.eq(5).find('input').val());
                            field.direcation = $.trim(arrtd.eq(6).find('input').val());
                            field.isShowColumn = $.trim(arrtd.eq(7).find('select').val());
                            field.isSearch = $.trim(arrtd.eq(8).find('select').val());

                            // 添加一个对象到fieldList中
                            data.fieldList.push(field);
                        }
                    });
                }

                // 生成html代码
                myObj.buildHtml = function () {
                    // ===================
                    // 生成编辑Html
                    // ===================
                    $('#divView').html();
                    var viewRender = template.compile(mySource.viewSource);
                    var viewHtml = viewRender(data);
                    var viewJSRender = template.compile(mySource.viewScript);
                    var viewJSHtml = viewJSRender(data);
                    var viewFinalHtml = mySource.viewHead + viewHtml + mySource.viewFoot + viewJSHtml;
                    // 将数据写进按钮data中
                    $('#btnCopyView').data('finalHtml', viewFinalHtml);
                    $('#divView').html(viewHtml);


                    // ===================
                    // 生成详情Html
                    // ===================
                    $('#divModify').html();
                    var modifyRender = template.compile(mySource.modifySource);
                    var modifyHtml = modifyRender(data);
                    var modifyJSRender = template.compile(mySource.modifyScript);
                    var modifyJSHtml = modifyJSRender(data);
                    var modifyFinalHtml = mySource.modifyHead + modifyHtml + mySource.modifyFoot + modifyJSHtml;
                    // 将数据写进按钮data中
                    $('#btnCopyModify').data('finalHtml', modifyFinalHtml);
                    $('#divModify').html(modifyHtml);

                    // ===================
                    // 生成列表Html
                    // ===================
                    $('#divList').html();
                    var listRender = template.compile(mySource.listSource);
                    var listHtml = listRender(data);
                    var listJSRender = template.compile(mySource.listScript);
                    var listJSHtml = listJSRender(data);
                    var listFinalHtml = mySource.listHead + listHtml + mySource.listFoot + listJSHtml;
                    // 将数据写进按钮data中
                    $('#btnCopyList').data('finalHtml', listFinalHtml);
                    $('#divList').html(listHtml);

                    // ===================
                    // 生成后台代码
                    // ===================
                    SyntaxHighlighter.autoloader(
                            ['js', 'jscript', 'javascript', '/scripts/syntaxhighlighter/scripts/shBrushJScript.js'],
                            ['css', '/scripts/syntaxhighlighter/scripts/shBrushCss.js'],
                            ['xml', 'html', '/scripts/syntaxhighlighter/scripts/shBrushXml.js'],
                            ['sql', '/scripts/syntaxhighlighter/scripts/shBrushSql.js'],
                            ['csharp', '/scripts/syntaxhighlighter/scripts/shBrushCSharp.js']
                    );
                    SyntaxHighlighter.all();

                    $('#divEnding').html();
                    var EndingRender = template.compile(mySource.endingSource);
                    var EndingHtml = EndingRender(data);
                    var EndingFinalHtml = EndingHtml;
                    // 将数据写进按钮data中
                    $('#btnCopyEnding').data('finalHtml', EndingFinalHtml);
                    $('#divEnding').html('<pre class="brush: csharp;toolbar: false;">' + EndingFinalHtml + '</pre>');
                }
            })();

            // ===================
            // 按钮事件
            // ===================
            (function () {
                // 导入数据源确认按钮事件
                $('#btnConfirmImport').on('click', function () {
                    var json = eval('(' + $('#importDataSource').val() + ')');
                    $.extend(data, json);
                    myObj.buildHtml();
                    $('#myModalImport').modal('hide');
                });
                // 导入数据源
                $('#btnImport').on('click', function () {
                    $('#myModalImport').modal('show');
                });
                // 重置
                $('#btnReset').on('click', function () {
                    window.location.href = window.location.href;
                });
                // 添加一行
                $('#btnAddRow').on('click', function () {
                    $('#mytbody').append(myObj.defaultTableHtml);
                });

                // 一键生成
                $('#btnBuild').on('click', function () {
                    // 获取字段信息
                    myObj.getDataFromTable();
                    // 生成html
                    myObj.buildHtml();
                });

                // 复制Html操作
                $('.btnHtmlCopy').on('beforecopy', function (e) {
                    console.log(e.type + " - #" + e.target.id);
                }).on('copy', function (e) {
                    e.clipboardData.clearData();
                    e.clipboardData.setData('text/plain', $(this).data('finalHtml'));
                    e.preventDefault();
                });
            })();


        });
    </script>

</body>
</html>
